{% extends "blog/base.html" %}

{% block htmlTitle %}{{ article.title }}{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://zhuqinggang.gitee.io/static/blog/markdown.css" type="text/css" />
<script src="https://zhuqinggang.gitee.io/static/valine/av-min.js"></script>
<script src='https://zhuqinggang.gitee.io/static/valine/Valine.min.js'></script>
{% endblock %}

{% block pageTitle %}{{ article.title }}{% endblock %}
{% block pageSubTitle %}<i class="mdui-icon material-icons">access_time</i>{{ article.date + " " + article.time }}{% endblock %}

{% block content %}

<div class="card mdui-card mdui-hoverable mdui-typo">
  <div class="mdui-card-content markdown-body">
    {{ article.content_html|safe }}
  </div>
  <div class="mdui-card-actions article-info">
    <div class="mdui-chip leancloud-visitors" id="{{ url_for('blog.article', article_id=article.id) }}" data-flag-title="{{ article.title }}">
      <span class="mdui-chip-icon mdui-color-theme"><i class="mdui-icon material-icons">remove_red_eye</i></span>
      <span class="mdui-chip-title leancloud-visitors-count"></span>
    </div>
    <div class="mdui-chip">
      <span class="mdui-chip-icon mdui-color-theme"><i class="mdui-icon material-icons">class</i></span>
      <span class="mdui-chip-title">
        <a href="{{ url_for('blog.category', category_name=article.category) }}">{{ article.category }}</a>
      </span>
    </div>
    {% for tag in article.tag %}
      <a class="tag" href="{{ url_for('blog.tag_show', tag_name=tag) }}">{{ tag }}</a>
    {% endfor %}
    <span> </span>
  </div>
</div>
<div class="card mdui-card mdui-hoverable mdui-typo">
  <div class="mdui-card-content markdown-body">
    <div id="vcomments"></div>
    <script>
      new Valine({
        el: "#vcomments",
        appId: "9sf3Otdpnh2JAD8rlzQlD8dL-gzGzoHsz",
        appKey: "IuVprOQT2aDICjRPlpHeOPLW",
        placeholder: "留个言嘛！",
        verify: true,
        avatat: "mp",
        visitor: true
      })
    </script>
  </div>
</div>
{% endblock %}